<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/jifen.css"/>
    <title></title>
</head>
<body>
<div class="layer" data-reactid=".0.1.0.1">
    <svg width="264px" height="264px" viewBox="0 0 264 264" data-reactid=".0.1.0.1.0">
        <g transform="translate(-4,-4)" data-reactid=".0.1.0.1.0.0">
            <g class="control-lines" transform="translate(29.000000, 29.000000)" stroke="#7A7774"
               stroke-linecap="square" data-reactid=".0.1.0.1.0.0.0">
                <path d="M62.5,0.5 L151.5,213.5" data-reactid=".0.1.0.1.0.0.0.0">
                </path>
                <path d="M62.5,0.5 L151.5,213.5" transform="translate(107.000000, 107.000000) scale(-1, 1) translate(-107.000000, -107.000000) "
                      data-reactid=".0.1.0.1.0.0.0.1">
                </path>
                <path d="M62.5,0.5 L151.5,213.5" transform="translate(107.000000, 107.000000) rotate(90.000000) translate(-107.000000, -107.000000) "
                      data-reactid=".0.1.0.1.0.0.0.2">
                </path>
                <path d="M62.5,0.5 L151.5,213.5" transform="translate(107.000000, 107.000000) scale(-1, 1) rotate(90.000000) translate(-107.000000, -107.000000) "
                      data-reactid=".0.1.0.1.0.0.0.3">
                </path>
            </g>
            <g class="control-center" transform="translate(76.000000, 76.000000)"
               data-reactid=".0.1.0.1.0.0.1">
                <g class="myself" data-reactid=".0.1.0.1.0.0.1.0">
                    <path d="M60.0000001,59.9836474 C60.0000001,59.9945491 60.0000001,60.0054509 60.0000001,60.0163526 C43.8943731,60.5438434 31,73.7661006 31,90 C31,106.233899 43.8943731,119.456157 59.9999947,119.983647 C60,119.989099 60,119.99455 60,120 C26.862915,120 -1.42108547e-14,93.137085 -1.42108547e-14,60 C-1.42108547e-14,26.862915 26.862915,1.27897692e-13 60,1.27897692e-13 C60,0.00545050643 60,0.0109013902 60,0.0163526511 C60.3319935,0.00547921413 60.6653569,1.27897692e-13 61,1.27897692e-13 C77.5685425,1.27897692e-13 91,13.4314575 91,30 C91,46.5685425 77.5685425,60 61,60 C60.6653569,60 60.3319936,59.9945208 59.9999948,59.9836472 Z"
                          fill="#A7CBCB" data-reactid=".0.1.0.1.0.0.1.0.0">
                    </path>
                    <text fill="#333333" data-reactid=".0.1.0.1.0.0.1.0.1">
                        <tspan x="58" y="34" data-reactid=".0.1.0.1.0.0.1.0.1.0">
                            何宗润
                        </tspan>
                    </text>
                </g>
                <g transform="translate(31.000000, 0.000000)" class="spouse" data-reactid=".0.1.0.1.0.0.1.1">
                    <path d="M28.9999999,59.9836473 C28.9999999,59.9945491 28.9999999,60.0054509 28.9999999,60.0163527 C12.894373,60.5438434 -2.84217094e-14,73.7661006 -2.84217094e-14,90 C-2.84217094e-14,106.233899 12.8943731,119.456157 28.9999947,119.983647 C29,119.989099 29,119.994549 29,120 C29.1954907,120 29.3907629,119.999065 29.5858127,119.997199 C29.7236634,119.999064 29.8617224,120 30,120 C30.8095088,120 31.611529,119.967937 32.40486,119.905013 C63.9578169,118.139864 89,91.9943894 89,60 C89,28.0056106 63.9578169,1.86013649 32.40486,0.0949869298 C47.8489531,1.3199617 60,14.2409663 60,30 C60,46.5685425 46.5685425,60 30,60 C29.6653569,60 29.3319935,59.9945208 28.9999947,59.9836472 Z M29,0.0163526512 C29,0.0109013951 29,0.0054505113 29,0 C29.1954907,0 29.3907629,0.000934924509 29.5858127,0.00280054621 C29.3900924,0.00544917012 29.1948086,0.00997228799 28.9999947,0.0163528235 Z"
                          fill="#FFFFFF" data-reactid=".0.1.0.1.0.0.1.1.0">
                    </path>
                    <text fill="#333333" data-reactid=".0.1.0.1.0.0.1.1.1">
                        <tspan x="28" y="94" data-reactid=".0.1.0.1.0.0.1.1.1.0">
                            配偶
                        </tspan>
                    </text>
                </g>
            </g>
            <g class="control-btn" data-reactid=".0.1.0.1.0.0.2">
                <g transform="translate(0.000000, 49.000000)" class="brother" data-reactid=".0.1.0.1.0.0.2.0">
                    <rect fill="#A7CBCB" transform="translate(30.089410, 43.078116) rotate(112.500000) translate(-30.089410, -43.078116) "
                          x="-9.91059019" y="27.0781162" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.0.0">
                    </rect>
                    <text transform="translate(30.602756, 45.090290) rotate(-67.500000) translate(-30.602756, -45.090290)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.0.1">
                        <tspan x="30.6027564" y="50.0902903" data-reactid=".0.1.0.1.0.0.2.0.1.0">
                            兄长
                        </tspan>
                    </text>
                </g>
                <g transform="translate(0.000000, 137.000000)" class="little-brother"
                   data-reactid=".0.1.0.1.0.0.2.1">
                    <rect fill="#A7CBCB" transform="translate(30.089410, 43.078116) rotate(67.500000) translate(-30.089410, -43.078116) "
                          x="-9.91059019" y="27.0781162" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.1.0">
                    </rect>
                    <text transform="translate(29.602756, 43.090290) rotate(-112.500000) translate(-29.602756, -43.090290)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.1.1">
                        <tspan x="28.6027564" y="48.0902903" data-reactid=".0.1.0.1.0.0.2.1.1.0">
                            弟弟
                        </tspan>
                    </text>
                </g>
                <g class="son" transform="translate(49.000000, 212.000000)" data-reactid=".0.1.0.1.0.0.2.2">
                    <rect fill="#A7CBCB" transform="translate(43.078116, 30.089410) rotate(22.500000) translate(-43.078116, -30.089410) "
                          x="3.07811622" y="14.0894098" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.2.0">
                    </rect>
                    <text transform="translate(42.986737, 30.559863) rotate(22.500000) translate(-42.986737, -30.559863)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.2.1">
                        <tspan x="42.9867369" y="35.5598631" data-reactid=".0.1.0.1.0.0.2.2.1.0">
                            儿子
                        </tspan>
                    </text>
                </g>
                <g class="daughter" transform="translate(137.000000, 212.000000)" data-reactid=".0.1.0.1.0.0.2.3">
                    <rect fill="#E0BBB4" transform="translate(43.078116, 30.089410) scale(1, -1) rotate(22.500000) translate(-43.078116, -30.089410) "
                          x="3.07811622" y="14.0894098" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.3.0">
                    </rect>
                    <text transform="translate(42.986737, 30.559863) rotate(-22.500000) translate(-42.986737, -30.559863)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.3.1">
                        <tspan x="42.9867369" y="35.5598631" data-reactid=".0.1.0.1.0.0.2.3.1.0">
                            女儿
                        </tspan>
                    </text>
                </g>
                <g class="little-sister" transform="translate(211.000000, 137.000000)"
                   data-reactid=".0.1.0.1.0.0.2.4">
                    <rect fill="#E0BBB4" transform="translate(30.854777, 43.712622) rotate(112.500000) translate(-30.854777, -43.712622) "
                          x="-9.14522332" y="27.7126222" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.4.0">
                    </rect>
                    <text transform="translate(30.602756, 44.090290) rotate(112.500000) translate(-30.602756, -44.090290)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.4.1">
                        <tspan x="28.6027564" y="49.0902903" data-reactid=".0.1.0.1.0.0.2.4.1.0">
                            妹妹
                        </tspan>
                    </text>
                </g>
                <g class="sister" transform="translate(212.000000, 49.000000)" data-reactid=".0.1.0.1.0.0.2.5">
                    <rect fill="#E0BBB4" transform="translate(30.089410, 43.078116) rotate(67.500000) translate(-30.089410, -43.078116) "
                          x="-9.91059019" y="27.0781162" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.5.0">
                    </rect>
                    <text transform="translate(29.602756, 43.090290) rotate(67.500000) translate(-29.602756, -43.090290)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.5.1">
                        <tspan x="30.6027564" y="48.0902903" data-reactid=".0.1.0.1.0.0.2.5.1.0">
                            姐姐
                        </tspan>
                    </text>
                </g>
                <g class="mother disabled" transform="translate(137.000000, 0.000000)"
                   data-reactid=".0.1.0.1.0.0.2.6">
                    <rect fill="#E0BBB4" transform="translate(43.078116, 30.089410) rotate(22.500000) translate(-43.078116, -30.089410) "
                          x="3.07811622" y="14.0894098" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.6.0">
                    </rect>
                    <text transform="translate(43.107728, 29.739922) rotate(22.500000) translate(-43.107728, -29.739922)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.6.1">
                        <tspan x="44.107728" y="34.7399216" data-reactid=".0.1.0.1.0.0.2.6.1.0">
                            杨奇
                        </tspan>
                    </text>
                </g>
                <g class="father disabled" transform="translate(49.000000, 0.000000)"
                   data-reactid=".0.1.0.1.0.0.2.7">
                    <rect fill="#A7CBCB" transform="translate(43.078116, 30.089410) scale(1, -1) rotate(22.500000) translate(-43.078116, -30.089410) "
                          x="3.07811622" y="14.0894098" width="80" height="32" rx="16" data-reactid=".0.1.0.1.0.0.2.7.0">
                    </rect>
                    <text transform="translate(43.425867, 29.321028) rotate(-22.500000) translate(-43.425867, -29.321028)"
                          fill="#333333" data-reactid=".0.1.0.1.0.0.2.7.1">
                        <tspan x="42.4258672" y="34.3210276" data-reactid=".0.1.0.1.0.0.2.7.1.0">
                            何不润
                        </tspan>
                    </text>
                </g>
            </g>
        </g>
    </svg>
    <div class="close-btn-container" data-reactid=".0.1.0.1.1">
        <button class="btn btn-link" data-reactid=".0.1.0.1.1.0">
            ×
        </button>
    </div>
</div>
<table>
    <tr>
        <td width="230">
            <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1480901225002">
                <a href="#" class="bds_more" data-cmd="more"></a>
                <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                <a class="bds_more" data-cmd="more">更多</a>
                <a class="bds_count" data-cmd="count" title="累计分享0次">0</a>
            </div>
            <script>
                window._bd_share_config =
                {
                    "common": {
                        "bdSnsKey": {},
                        "bdText": "分享显示的摘要",
                        "bdUrl": "文章的地址",
                        "bdDesc": "",
                        "bdPic": "显示的图片",
                        "bdMini": "2",
                        "bdMiniList": false,
                        "bdStyle": "0",
                        "bdSize": "16"
                    },
                    "share": {},
                    "image": {
                        "viewList": ["weixin", "qzone", "tsina", "tqq", "renren"],
                        "viewText": "分享到：", "viewSize": "16"
                    },
                    "selectShare":
                    {
                        "bdContainerClass": "fulltext_body1",
                        "bdSelectMiniList": ["weixin", "qzone", "tsina", "tqq", "renren"]
                    }
                };
                with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
            </script>
        </td>

    </tr>
</table>

<video id="video" src="http://ojcitaao2.bkt.clouddn.com/487c1b70-d8ae-4253-b812-3e568934e8b9.mp4" controls="controls">
</video>
<button id="capture">Capture</button>
<div id="output"></div>

</body>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script type="text/javascript">
    (function() {
        "use strict";
        var video, $output;
        var scale = 0.25;
        var initialize = function() {
            $output = $("#output");
            video = $("#video").get(0);
            $("#capture").click(captureImage);
        };
        var captureImage = function() {
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            var img = document.createElement("img");
            img.src = canvas.toDataURL();
            $output.prepend(img);
        };
        $(initialize);
    }());

</script>
</html>